<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>

    <!-- 需求：页面上有一个按钮，点击按钮，向服务器发送请求，获取图片数据
     服务器地址：https://api.thecatapi.com/v1/images/search?limit=1
     服务器响应如下：
     [
        {
            "id": "dc4",
            "url": "https://cdn2.thecatapi.com/images/dc4.gif",
            "width": 500,
            "height": 240
        }
    ]
    把图片显示在页面上，同时设置图片的宽和高 -->

    <img src="">
    <button>切换</button>

    <script>
        // 获取按钮
        let btn = document.querySelector("button");
        // 获取图片
        let img = document.querySelector("img");
        // 给按钮绑定点击事件
        btn.onclick = function () {
            axios({
                url: "https://api.thecatapi.com/v1/images/search",
                data:{
                    limit:1
                }
            })
                .then(res => {
                    console.log(res.data);
                    renderImg(res.data[0].url, res.data[0].width, res.data[0].height)
                    noClick(btn, 3)
                })
        }

        function renderImg(url, width, height) {
            img.src = url
            img.style.width = width + 'px';
            img.style.height = height + 'px';
        }

        function noClick(dom, s) {
            dom.style.pointerEvents = "none";
            setTimeout(() => {
                dom.style.pointerEvents = "auto";
            }, 1000 * s);
        }
    </script>
</body>

</html>